<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>康佳智电</title>
  <link rel="stylesheet" type="text/css" href="/css/style.css" />
 </head>
 <body>
 	<!-- 获取微信接口数据 -->
 	<input type="hidden" value="{{$jssdkSignPackage['appId'] or 0 }}" class="appId_val" />
	<input type="hidden" value="{{$jssdkSignPackage['nonceStr'] or 0 }}" class="nonceStr_val" />
	<input type="hidden" value="{{$jssdkSignPackage['timestamp'] or 0 }}" class="timestamp_val" />
	<input type="hidden" value="{{$jssdkSignPackage['signature'] or 0 }}" class="signature_val" />
	<!--弹框信息百分比-->
	<input type="hidden" value="{{ $state['filter2'] or 0 }}" class="Re_osmosis" />
	<input type="hidden" value="{{ $state['filter1'] or 0 }}" class="Pre_carbon" />
	<!--title-->
	<input  type="hidden" id="decStatus" value="{{ $state['decStatus'] or 0 }}" />
	<!--实时温度数值-->
	<input type="hidden" value="{{ $state['waterTemperature'] or 0 }}" class="progress_num" />
	<section class="page">
		<section class="inter_design">
			<section class="star_sky">
				<!--星空-->
				<section class="star_list" ></section>
				<section class="ring_box">
					<section class="rings c1"></section>
					<section class="rings c2"></section>
					<section class="rings c3"></section>
					<section class="rings c4"></section>
				</section>
				<!--制水进度条 start-->
				<section class="circleProgress_wrapper">
					<section class="wrapper right">
						<section class="circleProgress rightcircle"></section>
					</section>
					<section class="wrapper left">
						<section class="circleProgress leftcircle"></section>
					</section>
				</section>
				<section class="circleProgress_bg"></section>
				<!--左右滑动文本-->
				<section id="text">
					<ul id="textList">
						<li>
							<div class="p_box">
								<p>净水TDS</p>
				            	<p class="sum_num TDS2">{{ $state['TDS2'] or str_pad(0, 3,"0",STR_PAD_LEFT) }}</p>
								<p>源水TDS</p>
								<p class="TDS1">{{ $state['TDS1'] or str_pad(0, 3,"0",STR_PAD_LEFT) }}</p>
							</div>
							<div class="lessWater_box">缺水</div>
							<div class="service_box">检修</div>
			            </li>
						<li>
							<div class="p_box">
								<p>总流量</p>
			            		<p class="sum_num water_cnt">{{ $state['waterCnt'] or str_pad(0, 6,"0",STR_PAD_LEFT) }}</p>
							</div>
							<div class="lessWater_box">缺水</div>
							<div class="service_box">检修</div>
			            </li>
					</ul>
					<nav id="textNav">
						<span class="spanActive"></span>
						<span></span>
					</nav>
				</section>
				<seciton class="wave_bg"></seciton>
				<section class="wash"></section>
				<section class="full_water"></section>
				<section class="less_water"></section>
				<section class="service"></section>
				<section class="shut_down"></section>
			</section>
			<!--制水进度条 end-->
			<!--top-->
			<section class="top">
				<section class="h_left" onclick="window.location.href='config'"></section>
				<section class="h_midden">
					<p>康佳净水</p>
					<p class="hidden_txt">{{ $state['decStatusDescription'] or '离线' }}</p>
				</section>
				<section class="h_right"></section>
			</section>
			<!--top end-->
			<section class="star"/></section>
			<section class="T_progress">100º
				<div class="T_zero">0º</div>
				<div class="progress">
					<div class="show_num"></div>
					<div class="point"><div>
				</div>
			</section>
		</section>
		<!--滤芯信息-->
		<section id="part_footer">
			<ul id="part_scroll">
				<li>
					<div class="circles circles_btn ">
						<div class="first circle filter_btn">
							<strong></strong>
							<span>PP棉</span>
							<input type="hidden" class="first" id="filter1" value="{{ $state['filter1'] or 0 }}" />
							<input type="hidden" class="second" id="filterCnt1" value="{{ $state['filterCnt1'] or 0 }}" />
						</div>
						<div class="second circle filter_btn">
							<strong></strong>
							<span>前置活性炭</span>
							<input type="hidden" class="first" id="filter2" value="{{ $state['filter1'] or 0 }}" />
							<input type="hidden" class="second" id="filterCnt2" value="{{ $state['filterCnt1'] or 0 }}" />
						</div>
						
						<div class="third circle filter_btn">
							<strong></strong>
							<span>RO反渗透</span>
							<input type="hidden" class="first" id="filter3" value="{{ $state['filter2'] or 0 }}" />
							<input type="hidden" class="second" id="filterCnt3" value="{{ $state['filterCnt2'] or 0 }}" />
						</div>
						
						<div class="forth circle filter_btn">
							<strong></strong>
							<span>后置活性炭</span>
							<input type="hidden" class="first" id="filter4" value="{{ $state['filter1'] or 0 }}" />
							<input type="hidden" class="second" id="filterCnt4" value="{{ $state['filterCnt1'] or 0 }}" />
						</div>
					</div>
					<section class="footer_btn">
						@if(isset($state['decStatus']) && $state['effluentStatus'] == 5 && $state['decStatus'] !=7)
						<a class="power_off" >解锁</a>
						@elseif(isset($state['decStatus']) && $state['decStatus'] !=7)
						<a class="power_off" >关机</a>
						@else
						<a class="power_off" >开机</a>
						@endif
						<a class="wash_btn" >冲洗</a>
					</section>
				</li>
				<li>
					<!--温度设置模式 start-->
					<section class="T_setting" id="T_settings" >
						<p class="T_title">设置温度</p>
						<section class="progress_line" id="slide_box">
							<section class="progress_new" id="progress_width"></section>
							<section class="slide_block" id="slide_b">
								<span id="T_point"></span>
								<span id="T_number"></span>
							</section>
						</section>
						<section class="sect">
							<section class="milk"><span>冲奶模式</span></section>
							<section class="tea"><span>冲茶模式</span></section>
							<section class="boiling"><span>开水模式</span></section>
						</section>
					</section>
					<!--温度设置模式 end-->
				</li>
			</ul>
			<nav id="footerNav">
				<span class="spanActive"></span>
				<span></span>
			</nav>
		</section>
	</section>
	<!--弹出右选项卡-->
	<section class="Bomb_bg">
		<section class="Bomb_box">
			<!-- <p class="temp_btn"><i></i>设置温度</p> -->
			<p id="scan"><i></i>匹配设备</p>
			<p id="set_net"><i></i>配置网络</p>
		</section>
	</section>
	<!--滤芯 information-->
	<section class="filter_bg" >
		<section class="filter_box">
			<section class="filter_summ">滤芯信息</section>
			<section>
				<p><span>剩余寿命：</span><span class="life_percent"></span></p>
				<p><span>已用流量：</span><span class="used_num"></span></p>
			</section>
			<section><span>官方网站：</span><a href="http://www.konka.com/">http//www.konka.com/</a></section>
			<section><span>客服热线：</span><span class="telephone">400-889-0086</span><a href="http://www.konka.com/" class="buy_btn">购买滤芯</a></section>
			<section class="btm_box">
				<a class="calloff_btn">取消</a>
				<p class="reset_btn">立即复位</p>
			</section>
		</section>
	</section>
	<!-- 确认取消提示start -->
	<section class="undbing_bg">
		<section class="undbing_box">
			<p>确定要立即复位吗？</p>
			<section class="no_btn" >取消</section>
			<section class="yes_btn">确定</section>
		</section>
	</section>
	<!-- 提交信息服务器反馈信息-->
	<section class="hint_bg">
		<section class="hint_box">
			<p class="hint_text"></p>
			<section class="hint_btn">确定</section>
		</section>
	</section>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/Pop_filter_info.js"></script>
	<script src="/js/publick.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script src="/js/socket.io.js"></script>
</body>
</html>
<script>
	fnTab_txt();
	fnTab_temp();
	RealTemp();

	$(function(){
		wx.config({
			beta:true,
			debug:false,
			appId:$('.appId_val').val(),
			timestamp:$('.timestamp_val').val(),
			nonceStr:$('.nonceStr_val').val(),
			signature:$('.signature_val').val(),
			jsApiList:['configWXDeviceWiFi', 'scanQRCode']
		});
	});
	//温度数值变化
	function RealTemp()
	{
		var $progress_w = $('.progress_num').val();
		var $progress =$('.progress');
		var $T_progress=$('.T_progress');
		var $Point=$('.point');
		if($progress_w<2){
			$('.show_num').css("width","1px");
		}else{
			$('.show_num').css("width","none");
		}
		$('.show_num').html($progress_w+"°");
		if($progress_w<2){
			var $progress_w= 2;
		}
		$progress.width($progress_w+"%");
		
		if($progress_w <46){
			$T_progress.css("borderTop",".1rem solid #00ffff");
			$Point.css("backgroundColor","#00ffff");
		}else if($progress_w <61){
			$T_progress.css("borderTop",".1rem solid #ffcc00");
			$Point.css("backgroundColor","#ffcc00");
		}else{
			$T_progress.css("borderTop",".1rem solid #d37f7f");
			$Point.css("backgroundColor","#d37f7f");
		}
	}
	//配置网络
	$("#set_net").click(function(){
			
		wx.ready(function(){
			wx.invoke('configWXDeviceWiFi',{
			},function(res){
				switch (res.err_msg){
					case 'configWXDeviceWiFi:ok':
						hint('配置成功');
						break;
					case 'configWXDeviceWiFi:fail':
						hint('超时');
						break;
					case 'configWXDeviceWiFi:cancel':
						hint('用户取消');
						break;
					default:
						hint("res.err_msg:" + res.err_msg + "\nres.desc:" + res.desc);
				}
			});
		});
	});
	//sao yi sao 
	$("#scan").click(function(){

		wx.scanQRCode({
		    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
		    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
		    success: function (res) {
		    	if (res.errMsg === "scanQRCode:ok"){
			    	// 当needResult 为 1 时，扫码返回的结果
				    $.ajax({
				    	url:"/api/device/bind",
				    	type:"post",
				    	data:{device_code:res.resultStr},
				    	dataType:'json',
				    	success:function(data){
				    		if(data.status.errCode == 0||data.status.errCode == 2001){
				    			hint("绑定成功!");
		    					setTimeout(function(){
		    						window.location.href = "{{url('device/index')}}?"+new Date().getTime();
		    					},300);
				    		}else{					    			
				    			hint(data.status.message);
				    		}
				    	},
				    	error:function(jqXHR, textStatus, errorThrown){
		    				hint("绑定失败" + jqXHR.status + textStatus + errorThrown);
				    	}
				    });
			    }
			}
		});
	});
	//水机状态切换
	var DecStatus = $('#decStatus').val();
	if(DecStatus==0){
		off_line();
	}else if(DecStatus==1){
		add_state();
	}else if(DecStatus==2){
		less_water();
	}else if(DecStatus==3){
		full_water();	
	}else if(DecStatus==4){
		service();
	}else if(DecStatus==5){
		wash_state();
	}else if(DecStatus==7){
		shut_down();
	}else{
		off_line();
		// all_state();
		// $(".p_box").show();
		// $(".wash_btn").css("backgroundColor","#fff");
		// $('.circleProgress_bg').show();
	}
	//禁止冲洗
	window.onload=function(){
		var val = $(".power_off").html();
		if(DecStatus==2)
		{
			$(".lessWater_box").show().siblings().hide();
		}else if(DecStatus==4){
			$(".service_box").show().siblings().hide();
		}else{
			$(".p_box").show().siblings().hide();
		}
		if(val=="开机"||DecStatus==2||DecStatus==4){
			$(".wash_btn").css({
				"backgroundColor":"#ccc",
				"color":"#666"
			})
			$(".wash_btn").html("冲洗");
			$(".wash_btn").click(function(event){
				event.preventDefault();
			});
		}else{
			$(".wash_btn").css({
				"backgroundColor":"#fff",
				"color":"#666"
			});
		}
	};
	//点击冲洗按钮
	$('.wash_btn').click(function(event){
		var val = $(".power_off").html();
		if(val == "开机"||DecStatus==2||DecStatus==4)
		{
			$(".wash_btn").css({
				"backgroundColor":"#ccc",
				"color":"#666"
			});
			event.preventDefault();
		}else
		{
			$(".wash_btn").css({
				"backgroundColor":"#ccc",
				"color":"#fff"
			});
			if($(this).html() == "冲洗"){
				var command = "wash";
				
			}else{
				var command = "wash_cancel";
			}
			$.ajax({
				url:"/api/device/control",
				type:"post",
				dataType:"json",
				data:{command:command},
				success:function(data){
					if(data.status['errCode'] == 0){
					}else if(data.status.errCode == 2004){
	            		window.location.href = "/device";
	            		hint(data.status.message);
	            	}else{
	            		hint(data.status.message);
	            	}
				},
				error:function(jqXHR, textStatus, errorThrown){
					hint(jqXHR.responseText);
				}
			});
		}
	});
	//点击开关机/解锁按钮
	$(".power_off").click(function(){
		var val = $(this).html();
		if(val == "关机"){
			var command = "power_off";
			$(".wash_btn").html("冲洗");
			$(".wash_btn").css({
				"backgroundColor":"#fff",
				"color":"#666"
			});
		}else if(val == "开机"){
			var command = "power_on";		
		}else{
			var command = "unlock";
			$(".wash_btn").css({
				"backgroundColor":"#fff",
				"color":"#666"
			});
		}
		$.ajax({
			url:"/api/device/control",
			type:"post",
			dataType:"json",
			data:{command:command},
			success:function(data){

				if(data.status.errCode == 0){

				}else if(data.status.errCode == 2004){
            		window.location.href = "/device";
            		if(command=="power_on"){
            			$(".wash_btn").html("冲洗");
            		}
            		hint(data.status.message);
            		
            	}else{
            		hint(data.status.message);
            		if(data.status.errCode==2001){
            			off_line();
            		}
            	}
			},
			error:function(jqXHR, textStatus, errorThrown){
				hint(jqXHR.responseText);	
			}
		});
	});
	//异步传输数据
	var i=0;
	var socket = io('{{ $host }}:6001');
	socket.on('connection', function (data) {
	    // console.log(data);
	});
	socket.on('device-{{ $state['deviceCode'] }}:App\\Events\\DeviceInfoUpdate', function(message){
	    // console.log(message);
	    if($(".progress_num").val() != message.deviceData['waterTemperature']){
        	$(".progress_num").val(message.deviceData['waterTemperature']);
			RealTemp();
		}
		if($(".Pre_carbon").val() != message.deviceData['filter1'] || $(".Re_osmosis").val() != message.deviceData['filter2']){
            $(".Pre_carbon").val(message.deviceData['filter1']);
            $(".Re_osmosis").val(message.deviceData['filter2']);
            
            $("#filter1").val(message.deviceData['filter1']);
            $("#filterCnt1").val(message.deviceData['filterCnt1']);
            
            $("#filter2").val(message.deviceData['filter1']);
            $("#filterCnt2").val(message.deviceData['filterCnt1']);
            
            $("#filter3").val(message.deviceData['filter2']);
            $("#filterCnt3").val(message.deviceData['filterCnt2']);
            
            $("#filter4").val(message.deviceData['filter1']);
            $("#filterCnt4").val(message.deviceData['filterCnt1']);
			
			filter_fn();
		}
        $(".TDS1").html(message.deviceData['TDS1']);
        $(".TDS2").html(message.deviceData['TDS2']);
        $(".water_cnt").html(message.deviceData['waterCnt']);
        $(".hidden_txt").html(message.deviceData['decStatusDescription']);
        $("#decStatus").val(message.deviceData['decStatus']);
        
        switch(message.deviceData['decStatus']){
        	case 0:
        		off_line();
        		break;
        	case 1:
        		add_state();
        		break;
        	case 2:
        		less_water();
        		break;
        	case 3:
            	full_water();
            	break;
        	case 4:
        		service();
        		break;
        	case 5:
        		wash_state();
        		break;
        	case 7:
        		shut_down();
        		break;
            default:
            	off_line();
            	break;
    //         	all_state();
    //         	$(".p_box").show();
	//			$(".wash_btn").css("backgroundColor","#fff");
    //         	$('.circleProgress_bg').show();
        }
		if(message.deviceData['effluentStatus'] == 5 && message.deviceData['decStatus'] != 7){
			$(".power_off").html("解锁");
			$(".wash_btn").css({
				"backgroundColor":"#fff",
				"color":"#666"
			});
		}else if(message.deviceData['decStatus'] == 7){
			$(".power_off").html("开机");
			$(".wash_btn").css({
				"backgroundColor":"#ccc",
				"color":"#666"
			});
		}else{
			$(".power_off").html("关机");
			$(".wash_btn").css({
				"backgroundColor":"#fff",
				"color":"#666"
			});
		}
		i=0;
    });
	setInterval(function(){
		i++;
	  	if(i == 40){
			off_line();  		
	  		hint('设备处于离线状态');	
	  	}
	}, 1000);
</script>